<template>
  <view class="goodDetail">
    <view class="goodImages">
      <swiper :autoplay="true" :interval="3000" :duration="1000" class="imageSwiper" @change='swiperchange'>
        <swiper-item class="swiper-item" v-for="(item,index) in detailData.images" :key='index'>
          <image :src="item"></image>
        </swiper-item>
      </swiper>
      <view class="goodImagesindex">
        <text>{{swiperIndex}}/{{detailData.images && detailData.images.length}}</text>
      </view>
    </view>
    <!-- <view class="goodAdults">
      <text class="Adults_a">升为达人</text>
      <text class="Adults_b">升为达人,可赚取更多奖励</text>
      <view class="Adults_c">立即升级</view>
    </view> -->
    <view class="goodTitle">
      <view class="goodprice">
        <text class="price_a">¥</text><text class="price_b">{{detailData.price}}</text>
        <text class="price_c">批发价</text>
        <!-- <text class="price_d">奖{{detailData.profit}}元</text> -->
      </view>
      <view class="goodsales">
        <text class="sales_a" v-if="!detailData.hiddenMarketPrice">市场价¥{{detailData.marketPrice}}</text>
        <text class="sales_b">已售{{detailData.salesVolume}}件</text>
      </view>
      <text class="titleH2">{{detailData.name}}</text>
    </view>
    <view class="goodSpecification">
      <view class="specification_a" @click="showSqlist()">
        <text class="specif_a" v-if="!isChoose">规格</text>
        <text class="specif_a" v-else>已选</text>
        <text class="specif_b">{{chooseData.toString()}}</text>
        <image :src="$store.state.imgBaseUrl + '/goodDetail/go.png'" class="specif_c"></image>
      </view>
      <!-- <view class="specif_line"></view>
      <view class="specification_b">
        <text class="ication_a">运费</text>
        <text class="ication_b">{{detailData.logisticFee == 0 ? '免邮' : (detailData.logisticFee*1).toFixed(2)}}</text>
      </view> -->
    </view>
    <view class="moreDetails">
      <!-- <image src="../../static/image/goodDetail/more.png"></image> -->
      <view class="text1">宝贝详情</view>
      <view class="goods-detail">
        <rich-text :nodes="detailContent"></rich-text>
      </view>
    </view>
    <view class="fiexfooter">
      <view class="footer_li" @click="toShoppingcart('home')">
        <image :src="$store.state.imgBaseUrl + '/goodDetail/homeIcon.png'"></image>
        <text>首页</text>
      </view>
      <view class="footer_li" @click="showPosterHandler">
        <image :src="$store.state.imgBaseUrl + '/goodDetail/myIcon.png'"></image>
        <text>分享</text>
      </view>
      <view class="footer_li" @click="toShoppingcart('car')">
        <image :src="$store.state.imgBaseUrl + '/goodDetail/fireIcon.png'"></image>
        <text>购物车</text>
      </view>
      <view class="footer">
        <text class="footer_a" @click="addCart">加入购物车</text>
        <text class="footer_b" @click="showSqlist">立即购买</text>
      </view>
    </view>
    <view class="sqMaster" v-show="sqAccording" @touchmove.stop.prevent="doNothing">
      <view class="masterContent">
        <view class="cont_title">
          <image :src="imageUrl" class="right_left"></image>
          <view class="title_right">
            <view class="right">
              <text class="right_a">¥</text>
              <text class="right_b">{{price}}</text>
              <text class="right_c">批发价</text>
            </view>
            <text class="right_num">库存：{{quantity}}件</text>
            <text class="right_size">请选尺码</text>
          </view>
          <image :src="$store.state.imgBaseUrl + '/goodDetail/close.png'" class="close_master" @click="closeMaster"></image>
        </view>
        <scroll-view scroll-y="true" :style="{height: '510rpx'}">
          <view class="cont_color" v-for="(ProductItem,n) in simulatedDATA.specifications" :key='n'>
            <text>{{ProductItem.name}}</text>
            <ul class="product-footerlist clearfix">
              <li v-for="(oItem,index) in ProductItem.item" :key='index' @click="specificationBtn(oItem.name,n,$event,index)" v-bind:class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']">
                {{oItem.name}}
              </li>
            </ul>
          </view>
          <view class="cont_size">
            <text class="color_b">购买数量</text>
            <view class="numchang">
              <image :src="$store.state.imgBaseUrl + '/goodDetail/minus.png'" class="num_ch" @click="reduceshopNum"></image>
              <text class="num_show">{{num}}</text>
              <image :src="$store.state.imgBaseUrl + '/goodDetail/plus.png'" class="num_ch" @click="addshopNum"></image>
            </view>
          </view>
        </scroll-view>
        <view class="buyShop">
          <text class="shopCart" v-show="showAddcart" @click="addshopCart">加入购物车</text>
          <text class="shopBuy"  v-show="showAddcart" @click="nowBuy">立即购买</text>
          <text class="buycart"  v-show="!showAddcart" @click="addshopCart">确定</text>
        </view>
      </view>
    </view>
    <!-- 分享海报 -->
    <uni-popup class="downloadModal_goodsDetail" ref="remark" type="center" :maskClick="true" :show="isShowShareModal" @change="closeShareModal">
      <view class="downloadModal_content">
        <qrcode :detailData="detailData" canvasId="easypayQrcodeCanvas" @updateQRCodeUrl="updateQRCodeUrl" ref="qrcode" v-if="!goodsQrcodeFullUrl"></qrcode>
        <image :src="goodsQrcodeFullUrl" class="qrcode" v-if="goodsQrcodeFullUrl"></image>
      </view>
    </uni-popup>
    
    <common-free-store :isFreeStore="isFreeStore" @closeFreeStorePop="closeFreeStorePop"></common-free-store>
  </view>
</template>

<script>
import { goodsDatail, byProductId, addshopCart, saveCart, findDetaildata } from '@/service/purchaseShop/goodsDetail.service.js';
import { setWxConfig, decideEnv, isIOS, setWxConfigSync} from '@/unit/common.js'
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
import qrcode from './components/goodsQrcode.vue'
import commonFreeStore from '@/components/common-freeStore/index.vue'
export default {
  components: {
    uniPopup,
    qrcode,
    commonFreeStore
  },
  data() {
    return {
      goodsQrcodeFullUrl: '',
      sqAccording:false,
      showAddcart:'',
      detailData:{},
      swiperIndex:1,
      isChoose:false,
      selRuleObj: '', // 当前选中规则
      selRuleData: '', // 当前选中规则商品数据
      num:1,
      price:'',
      imageUrl:'',
      quantity:'',
      skuId:'',
      suresku:'',
      default:[],
      chooseData:'',
      simulatedDATA: { //模拟后台返回的数据 多规格
        "difference": [],
        "specifications": [],
      },
      selectArr: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      detailContent:'',
      userInfo: '',
      token: null,
      userInvite: '',
      isShowShareModal: false,
      isFreeStore: false
    }
  },
  computed: {
    myInfo () {
      return this.$store.state.userInfo;
    }
  },
  // watch: {
  //   myInfo (o, n) {
  //     if (!n) {
  //       this.userInfo = n;
  //     } else {
  //       this.userInfo = o;
  //     }
  //   }
  // },
  onLoad(option) {
    this.shopId = option.id;
    // this.userInfo = this.myInfo;
    this.userInviteId = option.inviteId;
  },
  onShow:function() {
    this.token = uni.getStorageSync('user_token');
    this.getDetaildata(this.shopId);
    this.getGoodsDetailRule(this.shopId);
  },
  onShareAppMessage () {
    // 
  },
  methods: {
    closeFreeStorePop () {
      this.isFreeStore = false;
    },
    getDetaildata (id) {
      let that = this;
      goodsDatail({id: this.shopId}, (res) => {
        if (res.status == 0) {
          this.detailData = res.data;
          this.detailContent = res.data.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display: block;" ');
          this.quantity = res.data.quantity;
          this.imageUrl = res.data.infoImageUrl;
          // // var url = window.location.origin + '/pages/purchaseShop/goodsDetail'
          // var url = 'https://testmartweb.tofire.cn/pages/purchaseShop/goodsDetail'
          // this.detailData.url = `${url}?id=${this.detailData.id}&inviteId=${this.userInfo.userId}`
          //#ifdef H5
          let surl = window.location.href.split('#')[0];
          if (decideEnv() && decideEnv() == 'wx' && !isIOS()) {
            setWxConfigSync().then(jswx => {
              jswx.updateAppMessageShareData({
                title: res.data.name,
                desc: res.data.intro,
                link: surl,
                imgUrl: res.data.images[0],
                success: () => {
                  // uni.showModal({
                  //   title: '分享成功'
                  // });
                },
                fail: () => {
                  // uni.showModal({
                  //   title: '分享失败'
                  // });
                }
              });
            }); 
          } else if (decideEnv() && decideEnv() == 'wx' && isIOS()) {
            that.$jswx.ready(function () {
              that.$jswx.updateAppMessageShareData({
                title: res.data.name,
                desc: res.data.intro,
                link: surl,
                imgUrl: res.data.images[0],
                success: () => {
                  // uni.showModal({
                  //   title: '分享成功'
                  // });
                },
                fail: () => {
                  // uni.showModal({
                  //   title: '分享失败'
                  // });
                }
              });
            });
          }
          //#endif
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    swiperchange (e) {
      this.swiperIndex=e.detail.current+1;
    },
    showSqlist () {
      this.showAddcart = true;
      this.sqAccording = true;
      window.scrollTo({top: 0})
    },
    doNothing () {
      return;
    },
    closeMaster () {
      this.sqAccording = false
    },
    toShoppingcart (type) {
      if (type == 'home') {
        uni.navigateTo({
          url:'/pages/purchaseShop/index'
        })
      } else {
        uni.navigateTo({
          url:'/pages/purchaseShop/goodsCar'
        })
      }
      
    },
    // 商品规格
    getGoodsDetailRule (goodsId) { 
      var self = this;
      let params = {
        id: goodsId
      }
      byProductId(params, (res) => {
        if (res.status === 0) {
          self.simulatedDATA.difference = res.data;
          this.simulatedDATA.specifications = this.ruleSort(res.data)
          for (var i in self.simulatedDATA.difference) {
            let a= self.simulatedDATA.difference[i].skuStr
            let key = JSON.parse(a);
            function getObjectValues(object) {
              var values = [];
              for (var property in object)
                values.push(object[property]);
              return values;
            }
            let  d =getObjectValues(key).join(",");
            self.shopItemInfo[d] = self.simulatedDATA.difference[i];
          }
          this.setdefaultList()
          self.checkItem();
        }
      });
    },
    setdefaultList () {
      let arrd = [];
      for (var i in this.shopItemInfo) {
        if(this.shopItemInfo[i].quantity !== 0){
          arrd.push(i)
        }
      }
      this.selectArr = arrd[0].split(',');
      let ad = []
      this.default.map(i=>{
        this.selectArr.map(item =>{
          let a = i.indexOf(item);
          ad.push(a)
        })
      })
      
      function removefushu(arrTem) {
        for(var i=0;i<arrTem.length;i++){
          if(arrTem[i]<0){
            arrTem.splice(i,1);
            removefushu(arrTem);
          }
        }
      }
      removefushu(ad);
      this.subIndex = ad;
    },
    ruleSort (data) { // 规格排序整理方法封装
      let arr1 = []
      let arr2 = []
      let arr3 = []
      data.forEach(function (item, index) {
        arr1.push(JSON.parse(item.skuStr))
      })
      let skuKeyPrev = []
      let skuKeyNext = []
      arr1.forEach(function (item, index) {
        skuKeyPrev = Object.keys(item);
        if (skuKeyPrev.length > skuKeyNext.length) {
          arr2 = skuKeyPrev
        } else {
          skuKeyNext = skuKeyPrev
        }
      })
      arr2.forEach(function (v, i) {
        arr1.forEach(function (item, index) {
          arr3[i] = `${arr3[i]},${item[v]}`
        })
      })
      arr3 = arr3.map(function (item) {
        let newitem = Array.from(new Set(item.split(',')))
        newitem.shift()
        newitem.sort()
        return newitem
      })
      this.default = arr3;
      let list1={id:0}
      let specifications1=[]
      arr2.map((a,ie) =>{
        let d = {id: 0}
        arr3.map((i,index) =>{
          if(ie == index){
            let item = [];
            list1['name'] = a;
            i.map(e=>{
              d.id++
              d['name'] = e;
              item.push(JSON.parse(JSON.stringify(d)));
            })
            list1.id++;
            list1['item'] = item
            specifications1.push(JSON.parse(JSON.stringify(list1)))
          }
        })
        
      })
      return specifications1
    },
    reduceshopNum () {
      if (this.num <= 1) return;
      this.num--;
    },
    addshopNum () {
      this.num++;
    },
    nowBuy () {
      if (this.myInfo.rank < 2 && this.myInfo.freeStore) {
        this.isFreeStore = true;
      } else {
        if(this.verifyTokenRank()) {
          if(this.suresku){
            let obj = this.detailData;
            obj.price = this.price
            obj.selRule = this.selRuleObj
            obj.selRuleId = this.selRuleData.skuId
            obj.selGoodsCount = this.num;
            obj.infoImageUrl = this.imageUrl
            obj.quantity = this.quantity
            obj.skuId = this.skuId
            obj.showCart = true;
            uni.setStorage({
              key: 'detailData',
              data: this.detailData,
              success: function () {
              }
            });
            uni.navigateTo({
              url: '/pages/purchaseShop/goodsSureOrder'
            });
          }else{
            uni.showToast({
              title: '请选择规格',
              icon: 'none'
            }); 
          }
        }
      }
      
    },
    addCart () {
      this.showAddcart = false;
      this.sqAccording = true;
      window.scrollTo({top: 0})
    },
    addshopCart () {
      if (this.myInfo.rank < 2 && this.myInfo.freeStore) {
        this.isFreeStore = true;
      } else {
        if (this.verifyTokenRank()){
          if(this.suresku){
            let params = {
              quantity: this.num, // 商品数量
              productId: this.shopId, // 商品id
              productSkuId: this.skuId // 规则
            }
            saveCart(params, (res) => {
              if (res.status === 0) {
                uni.showToast({
                  title: '成功加入购物车',
                  icon: 'none'
                });
                this.isChoose = true;
                this.chooseData = this.selRuleObj;
                this.sqAccording = false;
              } else {
                uni.showToast({
                  title: '添加购物车失败',
                  icon: 'none'
                });
              }
            })
          }else{
            uni.showToast({
              title: '请选择规格',
              icon: 'none'
            });
          }
        }
      }
    },
    verifyTokenRank() {
      if (this.userInvite) {
        uni.setStorage({
          key: 'userInvite',
          data: this.userInvite
        })
      }
      if (!this.token) {
        uni.showToast({
          title: '请先登录！',
          icon: 'none', 
          duration: 2000, 
          success: () => {
              
          },
        });
        return false;
      } else if (this.myInfo.rank < 2) {
        uni.showToast({
          title: '请先加盟入驻！',
          icon: 'none', 
          duration: 2000, 
          success: () => {
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/join/index',
              });            
            }, 2000);  
          },
        });
        return false
      }
      return true;
    },
    specificationBtn (item, n, event, index) {
      var self = this;
      if (self.selectArr[n] != item) {
        self.selectArr[n] = item;
        self.subIndex[n] = index;
      } else {
        self.selectArr[n] = "";
        self.subIndex[n] = -1; //去掉选中的颜色 
      }
      self.checkItem();
    },
    checkItem () {
      var self = this;
      var option = self.simulatedDATA.specifications;
      var result = [];  //定义数组存储被选中的值
      for (var i in option) {
        result[i] = self.selectArr[i] ? self.selectArr[i] : '';
      }
      for (var i in option) {
        var last = result[i];  //把选中的值存放到字符串last去
        for (var k in option[i].item) {
          result[i] = option[i].item[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
          option[i].item[k].isShow = self.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
      }
      this.simulatedDATA.difference.map((item, index) => {
        let a= item.skuStr
        let key = JSON.parse(a)
        function getObjectValues(object) {
          var values = [];
          for (var property in object)
            values.push(object[property]);
          return values;
        }
        let  d = getObjectValues(key)
        if (JSON.stringify(result) == JSON.stringify(d)) {
          // self.price = item.discountPrice
          self.price = item.price
          self.imageUrl = item.imageUrl
          self.quantity = item.quantity
          self.skuId = item.skuId
          self.selRuleObj = result
        }
      })
      if(result == this.selRuleObj){
        this.suresku = true
      } else{
        this.suresku = false
      }
      self.$forceUpdate(); //重绘
    },
    isMay (result) {
      for (var i in result) { 
        if (result[i] ==='') {
          return true; //如果数组里有为空的值，那直接返回true
        }
      }
      return this.shopItemInfo[result] ? (this.shopItemInfo[result].quantity == 0 ? false : true):false ; //匹配选中的数据的库存，若不为空返回true反之返回false
    },
    closeShareModal (e) {
      this.isShowShareModal = e.show
    },
    showPosterHandler () {
      this.detailData._userName = this.myInfo.nickName;
      this.detailData._href = this.myInfo.href;
      var url = window.location.origin + '/pages/purchaseShop/goodsDetail'
      // var url = 'https://testmartweb.tofire.cn/pages/purchaseShop/goodsDetail'
      this.detailData.url = `${url}?id=${this.detailData.id}&inviteId=${this.myInfo.userId}`
      this.isShowShareModal = true;
    },
    updateQRCodeUrl (obj) {
      this.goodsQrcodeFullUrl = obj.url;
      // console.log(obj, 'obj is')
    }
  }
}
</script>

<style scoped lang="scss">
  .downloadModal_goodsDetail {
    .downloadModal_content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      opacity: 1;
      // .downloadModal_img {
      //   width: 520rpx;
      //   height: 736rpx;
      // }
      .qrcode {
        width: 510rpx;
        height: 752rpx;
      }
      // .downloadModal_tip {
      //   font-size: 28rpx;
      //   color: #999999;
      //   text-align: center;
      //   // border-top: 2rpx solid #999999;
      //   padding-top: 20rpx;
      // }
    }
  }
  .goods-detail {
    padding: 0 40rpx 40rpx;
  }
	.goodDetail{
		margin-bottom: 140rpx;
    font-size: 24rpx;
	}
	.goodImages{
		position: relative;
	}
	.imageSwiper{
		width: 750rpx;
		height: 750rpx;
	}
	.swiper-item{
		width: 750rpx;
		height: 750rpx;
	}
	.swiper-item image{
		width: 750rpx;
		height: 750rpx;
	}	
	.goodImagesindex{
		position: absolute;
		right: 0;
		bottom: 36rpx;
		width:72rpx;
		height:40rpx;
		background:rgba(0,0,0,0.2);
		border-radius:20rpx 0rpx 0rpx 20rpx;
		color: #FFFFFF;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:40rpx;
		padding-left: 28rpx;
	}
	.goodAdults{
		width:750rpx;
		height:76rpx;
		background:linear-gradient(270deg,rgba(255,247,221,1) 0%,rgba(255,248,224,1) 100%);
		box-shadow:0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.05);
		display: flex;
    justify-content: space-between;
		align-items: center;
	}
	.goodAdults .Adults_a{
		display: inline-block;
		width:200rpx;
		height:76rpx;
		background:rgba(42,46,51,1);
		box-shadow:0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.05);
		border-radius:0rpx 200rpx 200rpx 0rpx;
		font-size:28rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(255,224,166,1);
		text-align: center;
		line-height:76rpx;
	}
	.goodAdults .Adults_b{
		height:34rpx;
		font-size:24rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(158,89,25,1);
		line-height:34rpx;
	}
	.goodAdults .Adults_c{
		display: inline-block;
		width:160rpx;
		height:50rpx;
		border-radius:200rpx;
		border:2rpx solid rgba(158,89,25,1);
		font-size:24rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(158,89,25,1);
		line-height:50rpx;
		margin-right: 26rpx;
    text-align: center;
	}
	.goodTitle{
	    height: 278rpx;
	    background: #FFFFFF;
	    padding-left: 24rpx;
	}
	.goodTitle .goodprice{
		padding-top: 22rpx;
		height: 66rpx;
		line-height: 66rpx;
	}
	.goodprice .price_a{
		font-size:r32px;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(205,67,57,1);
	}
	.goodprice .price_b{
		font-size:48rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:600;
		color:rgba(205,67,57,1);
	}
	.goodprice .price_c{
		display: inline-block;
		text-align: center;
		width:92rpx;
		height:40rpx;
		background:rgba(255,233,233,1);
		border-radius:4rpx;
		margin-left: 20rpx;
		font-size:22rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(205,67,57,1);
		line-height:40rpx;
	}
	.goodprice .price_d{
	    float: right;
		width:112rpx;
		margin-top: 14rpx;
		padding-left: 22rpx;
		height:40rpx;
		background:rgba(255,233,233,1);
		border-radius:200rpx 4rpx 4rpx 200rpx;
		font-size:22rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(205,67,57,1);
		line-height:40rpx;
	}
	.goodTitle .goodsales{
		display: flex;
		justify-content: space-between;
		margin-left: 2rpx;
		margin-top: 4rpx;
		margin-right: 28rpx;
	}
	.goodsales .sales_a{
		height:36rpx;
		font-size:26rpx;
		text-decoration: line-through;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(172,172,172,1);
		line-height:36rpx;
	}
	.goodsales .sales_b{
		height:34rpx;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:34rpx;
	}
	.goodTitle .titleH2{
		display: inline-block;
		width:706rpx;
		height:80rpx;
		margin-top: 34rpx;
		margin-right: 24rpx;
		font-size:32rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		color:rgba(51,51,51,1);
		line-height:40rpx;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	}
	.goodSpecification{
		width:748rpx;
		// height:196rpx;
		margin-top: 20rpx;
		background:rgba(255,255,255,1);
		box-shadow:0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.05);
		border-radius:8rpx;
	}
	.goodSpecification .specification_a{
		// height: 100rpx;
		// line-height: 100rpx;
    padding: 30rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
	}
	.specification_a .specif_a{
    width: 92rpx;
		margin-left: 18rpx;
		font-size:26rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		color:rgba(51,51,51,1);
	}
	.specification_a .specif_b{
		margin-left: 58rpx;
		font-size:26rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.specification_a .specif_c{
		width:30rpx;
		height:26rpx;
		margin-right: 18rpx;
	}
	.goodSpecification .specif_line{
		float: right;
		width:616rpx;
		height:2rpx;
		background:rgba(240,240,240,1);
	}
	.goodSpecification .specification_b{
		height: 100rpx;
		line-height: 100rpx;
	}
	.specification_b .ication_a{
		float: left;
		margin-left: 18rpx;
		height:28rpx;
		font-size:26rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		color:rgba(51,51,51,1);
		line-height:28rpx;
		margin-top: 33rpx;
	}
	.specification_b .ication_b{
		height:28rpx;
		float: left;
		margin-top: 31rpx;
		font-size:26rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:28rpx;
		margin-left: 58rpx;
	}
	.moreDetails{
		background:rgba(255,255,255,1);
		box-shadow:0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.05);
		margin-top: 20rpx;
	}
	.moreDetails image{
		height: 28rpx;
		width: 30rpx;
		line-height:90rpx;
		vertical-align: middle;
	}
	.moreDetails .text1{
		font-size:28rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:600;
		color:rgba(51,51,51,1);
    text-align: center;
    padding: 30rpx 0 15rpx;
	}
	.fiexfooter{
		width:100%;
		height:120rpx;
    line-height: 120rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background:rgba(255,255,255,1);
		display: flex;
		justify-content:space-around;
	}
	.footer_li {
		display: flex;
		flex-direction: column;
		text-align: center;
    margin-top: 26rpx;
	}
  .footer_li:first-of-type {
    margin-left: 14rpx;
  }
	.footer_li image{
		width: 32rpx;
    margin: 0 auto;
		height: 34rpx;
	}
  .footer_li text{
    height:28rpx;
    font-size:20rpx;
    margin-top: 8rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:28rpx;
  }
	.footer .footer_a{
		display: inline-block;
		width:200rpx;
		height:88rpx;
		background:#C2AC78;
		border-radius:200rpx 0rpx 0rpx 200rpx;
		font-size:28rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height:88rpx;
    text-align: center;
	}
	.footer .footer_b{
		display: inline-block;
		width:200rpx;
		height:88rpx;
		background:#434343;
		border-radius:0rpx 200rpx 200rpx 0rpx;
		font-size:28rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height:88rpx;
    text-align: center;
	}
  .sqMaster{
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
  }
  .masterContent{
    background: #FFFFFF;
    width:100%;
    height:900rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    background:rgba(255,255,255,1);
    border-radius:20rpx 20rpx 0rpx 0rpx;
   }
  .cont_title{
    margin: 42rpx 30rpx;
  }
  .masterContent .cont_title .right_left{
    width:160rpx;
    height:160rpx;
  }
  .title_right{
    display: inline-block;
    vertical-align: top;
    margin-left: 30rpx;
    margin-top: 15rpx;
  }
  .right{
    font-size:32rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(205,67,57,1);
    line-height:44rpx;
  }
  .right_b{
    font-size:48rpx;
  }
  .right_c{
    display: inline-block;
    width:92rpx;
    height:40rpx;
    vertical-align: super;
    margin-left: 20rpx;
    background:rgba(255,233,233,1);
    border-radius:4rpx;
    font-size:22rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(205,67,57,1);
    line-height:40rpx;
    text-align: center;
  }
  .right_num{
    display: block;
    height:34rpx;
    font-size:24rpx;
    margin-top: 8rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:34rpx;
  }
  .right_size{
    height:34rpx;
    font-size:24rpx;
    margin-top: 8rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:34rpx;
  }
  .close_master{
    width:30rpx;
    height:30rpx;
    border-radius:5rpx;
    float: right;
  }
  .cont_color{
    padding: 0 30rpx;
  }
  .cont_color .color_a{
    height:34rpx;
    font-size:24rpx;
    display: block;
    margin-left: 30rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:34rpx;
  }
  .color_b{
    margin-left: 30rpx;
  }
  .cont_size{
    margin-top: 60rpx;
  }
  .numchang{
    float: right;
    margin-right: 26rpx;
  }
  .num_ch{
    width:28rpx;
    height:30rpx;
    font-size:30rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:42rpx;
  }
  .num_show{
    display: inline-block;
    text-align: center;
    width:68rpx;
    height:48rpx;
    line-height: 48rpx;
    color: #333333;
    background:rgba(245,245,245,1);
    border-radius:4rpx;
    vertical-align: middle;
    font-size: 28rpx;
    margin-left: 8rpx;
    margin-right: 8rpx;
  }
  .buyShop{
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 20rpx 40rpx 10rpx;
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .shopCart{
    display: inline-block;
    width:320rpx;
    height:88rpx;
    background:#C2AC78;
    border-radius:44rpx;
    font-size:28rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:88rpx;
    text-align: center;
  }
  .shopBuy{
    margin-left: 30rpx;
    display: inline-block;
    width:320rpx;
    height:88rpx;
    background:#434343;
    border-radius:44rpx;
    font-size:28rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:88rpx;
    text-align: center;
  }
  .buycart{
    display: inline-block;
    width:698rpx;
    height:88rpx;
    background:#434343;
    border-radius:44rpx;
    font-size:28rpx;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:#F6DA99;
    line-height:88rpx;
    text-align: center;
  }
  .product-footerlist {
      margin-top: 0.1rem;
      padding-left: 0;
  }
  .product-footerlist li {
    max-width: 420rpx;
    min-width: 140rpx;
    display: inline-block;
    background:rgba(247,247,247,1);
    border-radius:30rpx;
    font-size:24rpx;
    margin-right: 20rpx;
    margin-top: 22rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:1.5;
    border: 1px solid rgba(247,247,247,1);
    padding: 10rpx;
    text-align: center;
  }
  .product-footerlist li.productActive {
    background:rgba(255,228,226,1);
    border: 1px solid rgba(205,67,57,1);
    color:rgba(205,67,57,1);
  }
  .product-footerlist li.noneActive {
    width:140rpx;
    display: inline-block;
    height:60rpx;
    background:rgba(247,247,247,1);
    border-radius:30rpx;
    font-size:24rpx;
    margin-right: 20rpx;
    margin-top: 22rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(201,201,201,1);
    text-decoration: line-through;
    line-height:60rpx;
    text-align: center;
    border:2rpx solid rgba(247,247,247,1);
  }
</style>
